import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    base: '/',
    plugins: [vue(), vueJsx()],
    css: {
      preprocessorOptions: {
        scss: { api: 'modern-compiler' },
      }
    },
    // 本地开发服务
    server: {
      // 端口号
      port: 3000,
      // 代理
      proxy: {
        // 本地开发都会存在跨域问题，问：什么是跨域，如何解决跨域
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      open: true
    },
    // 生产构建配置
    // 所有配置都称之为数据协议，vite 数据协议
    build: {
      outDir: 'dist', //默认dist
      // 超出大小警告
      chunkSizeWarningLimit: 1024,
      // 资源目录
      assetsDir: 'assets', //默认assets
      // sourcemap
      // 一般情况下都不能直接将 sourcemap 部署到生产，因为会暴露源码
      // 面试官：sourcemap 是什么？？？ 如果不能上传到生产环境的话，怎么定位线上报错问题？？？
      // 实战：企业级性能与异常监控平台 会托管 sourcemap 文件 通过 sourcemap 文件定位到源码 
      // sourcemap: true
    },
    // 本地环境
    // 别名设置
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
        "'@/views": resolve(__dirname, "src/views"),
        "@images": resolve(__dirname, "src/assets/images"),
        "@/store": resolve(__dirname, "src/store"),
      }
    }
  }
})
